<!DOCTYPE html>
<html lang="en">
<head>
    <title>New Block Test</title>
    <script src="javascripts/modernizr-1.1.min.js"></script>
    <style>
        .wrapper, .socket{
            display: inline-block;
            position: relative;
        }
        .socket{
            position: relative;
/*            background-color: #FFF;*/
/*            height: 20px;*/
        }
        .block{
            position: relative;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            padding-bottom: 1px;
            background-color: #FC6;
            white-space: nowrap;
        }
        p{
            padding: 7px 20px;
            padding-bottom: 3px;
            margin: 0px;
        }
        .socket{
            padding: 4px;
            margin: 0px;
        }
        label, p{
            font-family: Georgia;
            font-size: 12px;
        }
        .tab, .slot{
            display: block;
            position: absolute;
            left: 0px;
            margin: 0px;
            margin-left: 30px;
            margin-right: auto;
            width: 16px;
            height: 5px;
            top: 0px;
            -webkit-border-bottom-right-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            -moz-border-radius-bottomleft: 4px;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        .slot{
            background-color: #FFF;
        }
        .tab{
            background-color: #FC6;
            z-index: 10;
        }
        .contained{
            background-color: white;
            position: relative;
            padding-top: 1px;
            margin-left: 10px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            overflow: visible;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-bottom-left-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-bottomleft: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            
        }
        .next{
            position: relative;
            padding-bottom: 8px;
            padding-top: 1px;
            background-color: transparent;
            width: 100%;
            overflow: visible;
/*            border: 1px dashed green;*/
        }
        input{
            margin-left: 5px;
            width: 3em;
            margin-right: 5px;
            border: 0px;
            padding: 0px;
            height: 16px;
        }
        .chunk{
            width: 200px;
            float: left;
        }
        section{
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <h1>New Block Test</h1>
    <div class="block_canvas">
        <section>
            <div class="chunk">
                <h1>Step</h1>
                <div class="wrapper">
                    <div class="block">
                        <p><label>Step</label></p>
                        <b class="slot"></b>
                    </div>
                    <div class="next"><i class="tab"></i></div>
                </div>
            </div>
            <div class="chunk">
                <h1>Step</h1>
                <div class="wrapper">
                    <div class="block">
                        <p><label>Step</label></p>
                        <b class="slot"></b>
                    </div>
                    <div class="next"><i class="tab"></i></div>
                </div>
            </div>
            <div class="chunk">
                <h1>Step</h1>
                <div class="wrapper">
                    <div class="block">
                        <p><label>Step</label></p>
                        <b class="slot"></b>
                    </div>
                    <div class="next"><i class="tab"></i></div>
                </div>
            </div>
            <div class="chunk">
                <h1>Step</h1>
                <div class="wrapper">
                    <div class="block">
                        <p><label>Step</label></p>
                        <b class="slot"></b>
                    </div>
                    <div class="next"><i class="tab"></i></div>
                </div>
            </div>
        </section>
        <section>
            <h1>Simple Container</h1>
            <div class="wrapper">
                <div class="block">
                    <p><label>Container</label></p>
                    <b class="slot"></b>
                    <div class="contained">
                        <i class="tab"></i>
                    </div>
                </div>
                <div class="next">
                    <i class="tab"></i>
                </div>
            </div>
        </section>
        <section>
            <h1>Value</h1>
            <div class="wrapper">            
                <div class="block value number">
                    <div class="number socket">
                        <input type="number" value="0"/>
                    </div>
                </div>
            </div>
            <div class="wrapper">            
                <div class="block value number">
                    <div class="number socket">
                        <input type="number" value="0"/>
                    </div>
                </div>
            </div>
            <div class="wrapper">    
                <div class="block value number">
                    <div class="number socket">
                        <input type="number" value="0"/>
                    </div>
                </div>
            </div>
            <div class="wrapper">            
                <div class="block value number">
                    <div class="number socket">
                        <input type="number" value="0"/>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <h1>Value Combiner</h1>
            <div class="wrapper">
                <div class="block value boolean">
                    <div class="boolean socket">
                        <input />
                    </div>
                    <label>or</label>
                    <div class="boolean socket">
                        <input />
                    </div>
                </div>
            </div>
        </section>
        <section>
            <h1>And in conclusion...</h1>
        </section>
    </div><!-- .block_canvas -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
    <script src="javascripts/jquery.event.drag-1.5.min.js"></script>    
    <script src="javascripts/jquery.event.drop-1.2.min.js"></script>    
    <script>
    // Extend the jQuery result object
    $.fn.extend({
        long_name: function() {
            var e = this[0];
            var parts = [e.tagName.toLowerCase()];
            if (e.id) {
                parts.push('#' + e.id);
            }
            if (e.className) {
                parts.push('.' + e.className.split(/\s/).join('.'));
            }
            return parts.join('');
        },
        isSameNode: function(jqOrNode){
            var self = this.get(0);
            var other = jqOrNode.TEXT_NODE ? jqOrNode: jqOrNode.get(0);
            return self.isSameNode(other);
        }
    });
    $('.block').bind('dragstart', function(event){
        var drag = $(this);
        var canvas = drag.closest('.block_canvas');
        var proxy = drag.closest('.wrapper');
        if (proxy.parent().is('.socket')){
            proxy.siblings('input').show();
        }
        $.dropManage(); // reset positions?
        canvas.append(proxy);
        proxy.css({
            position: 'absolute',
            left: event.offsetX,
            top: event.offsetY
        });
        
        proxy.css('z-index', 100);
        return proxy;
    });
    
    $('.block').bind('drag', function(event){
        $(event.dragProxy).css({
            position: 'absolute',
            left: event.offsetX, 
            top: event.offsetY
        });
    });
    
    $('.block').bind('dragend', function(event){
        if (event.dropTarget){
            $(event.dragProxy).css({
                position: 'relative',
                left: 0, 
                top: 0,
                'z-index': 0
            });
        }
    });
    
    $('.tab').bind('dropstart', function(event){
        // Don't drop if this tab is already filled
        if ($(this).parent().find('.wrapper').length) return false;
        // This should prevent dropping on a block we're already part of, but I don't think that is possible anymore
        if ($.contains(this.parentNode, event.dragTarget)) return false;
        // don't drop if this is the same block, shouldn't be possible
        if ($(this).closest('.wrapper').isSameNode($(event.dragTarget).closest('.wrapper'))) return false;
        // don't drop a value on a tab
        if ($(event.dragTarget).is('.value')) return false;
        // activate the drop target element
        $(this).css('border', '1px dashed red');
        $(event.dragTarget).find('.slot').css('background-color', 'green');
        return true;
    });
    
    $('.tab').bind('drop', function(event){
        $(this).parent().append($(event.dragTarget).closest('.wrapper'));
    });
    
    $('.tab').bind('dropend', function(event){
        $(this).css('border', 0);
        $(event.dragTarget).find('.slot').css('background-color', '');
    });
    
    $('.socket').bind('dropstart', function(event){
        // if this socket is filled, return false
        if ($(this).find('.value').length) return false;
        // don't acccept non-value blocks
        if (!$(event.dragTarget).is('.value')) return false;
        // don't drop if this is the same block, shouldn't be possible
        if ($(this).closest('.wrapper').isSameNode($(event.dragTarget).closest('.wrapper'))) return false;
        // activate the drop target
        $(this).find('input').css('border', '1px dashed red');
        $(eventTarget).css('border', '1px dashed green');
        return true;
    });
    
    $('.socket').bind('drop', function(event){
        var socket = $(this);
        socket.find('input').css('border', '').hide();
        socket.append($(event.dragTarget).closest('.wrapper'));
    });
    
    $('.socket').bind('dropend', function(event){
        $(event.dragTarget).css('border', '1px solid white');
    });
    </script>
</body>
</html>